import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
import './Header.scss'
import logo from '../../assets/logo.png'
import { SearchOutline } from 'antd-mobile-icons';

class Index extends Component<any, any> {
    constructor(props: any) {
        super(props);
        this.state = {
            cityId: ''
        }

    }

    toCity() {
        this.props.history.push('/city')
    }

    render() {
        // console.log(this.props);

        return (
            <div className='header'>
                <div className="head">
                    {
                        this.props.cityId.state == undefined ?
                            <span onClick={() => { this.toCity() }}>西安</span> :
                            <span onClick={() => { this.toCity() }}>{this.props.cityId.state.city}</span>
                    }
                    <div className="search" onClick={() => { this.props.history.push('/search') }}>
                        <img src={logo} alt="" />
                        <span> | </span>
                        <SearchOutline className='icon' fontSize={20}/>
                        立柜式公调
                    </div>
                    {
                        localStorage.getItem('token') ?
                            <span>欢迎</span> :
                            <span onClick={() => { this.props.history.push('/login') }}>登录</span>
                    }
                </div>
            </div>
        );
    }
}

export default withRouter(Index);